<template>
  <div class="app-container">
    上传文章
    <el-form label-width="120px">
      <el-form-item label="文章标题">
        <el-input v-model="article.title"/>
      </el-form-item>
      <el-form-item label="上传文章">
        <el-upload
          class="upload-demo"
          :on-success="fileUploadSuccess"
          :action="BASE_API+'/eduoss/fileoss/upload'"
          >
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">温馨提示：只能上传pdf</div>
        </el-upload>
      </el-form-item>
      <el-form-item label="文章封面">
        <pan-thumb :image="image"/>
        <el-button type="primary" icon="el-icon-upload" @click="imagecropperShow=true">更换封面
        </el-button>

        <image-cropper
          v-show="imagecropperShow"
          :width="300"
          :height="300"
          :key="imagecropperKey"
          :url="BASE_API+'/eduoss/fileoss/upload'"
          field="file"
          @close="close"
          @crop-upload-success="cropSuccess"/>
      </el-form-item>
      <el-form-item>
        <el-button :disabled="saveBtnDisabled" type="primary" @click="saveOrUpdate">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>

  import article from '@/api/article/article'
  import ImageCropper from '@/components/ImageCropper'
  import PanThumb from '@/components/PanThumb'

  export default {
    components: { ImageCropper, PanThumb },
    data() {
      return {
        image: 'https://cytbucket.oss-cn-beijing.aliyuncs.com/2020/08/21/8217f8c1-3dca-49a0-b25f-1034c1e6031d.png',
        article: {
          name: '',
          title: '',
          cover: 'https://cytbucket.oss-cn-beijing.aliyuncs.com/2020/08/21/8217f8c1-3dca-49a0-b25f-1034c1e6031d.png',
          path: ''
        },
        BASE_API: process.env.BASE_API, // 接口API地址
        imagecropperShow: false, // 是否显示上传组件
        imagecropperKey: 0, // 上传组件id
        saveBtnDisabled: false // 保存按钮是否禁用,
      }
    },
    created() {
      this.init()
    },
    watch: {
      $route(to, from) {
        console.log('watch $route')
        this.init()
      }
    },
    methods: {
      fileUploadSuccess(response) {
        if (response.success === true) {
          this.article.path = response.data.url
          this.loading = false
          this.$message({
            type: 'success',
            message: response.message
          })
        }
      },
      // 上传成功后的回调函数
      cropSuccess(data) {
        console.log(data)
        this.imagecropperShow = false
        this.article.cover = data.url
        // 上传成功后，重新打开上传组件时初始化组件，否则显示上一次的上传结果
        this.imagecropperKey = this.imagecropperKey + 1
      },

      // 关闭上传组件
      close() {
        this.imagecropperShow = false
        // 上传失败后，重新打开上传组件时初始化组件，否则显示上一次的上传结果
        this.imagecropperKey = this.imagecropperKey + 1
      },

      init() {
        console.log('created')
        if (this.$route.params && this.$route.params.id) {
          const id = this.$route.params.id
          this.getInfo(id)
        } else {
          this.article = {}
        }
      },
      // 根据id查询记录
      getInfo(id) {
        article.getinfo(id).then(response => {
          this.article = response.data.article
        }).catch((response) => {
          this.$message({
            type: 'error',
            message: '获取数据失败'
          })
        })
      },
      saveOrUpdate() {
        this.saveBtnDisabled = true
        if (!this.article.id) {
          this.saveData()
        } else {
          this.updateData()
        }
      },
      saveData() {
        console.log(this.article)
        article.save(this.article).then(response => {
          return this.$message({
            type: 'success',
            message: '保存成功!'
          })
        }).then(resposne => {
          this.$router.push({ path: '/article/list' })
        }).catch((response) => {
          this.$message({
            type: 'error',
            message: '保存失败'
          })
        })
      }
    }
  }
</script>
